import React, {Component} from 'react';
import './index.less'
import {getAllside} from "../../../../network/side";
import { Card } from 'antd';
import {withRouter} from "react-router-dom";

class SideNav extends Component {
    state = {
        sides: [],
        isLoading: true
    }
    render() {
        return (
            <div className='sideNav'>
                <div className="container">
                    <div className="title">
                        产品分类
                    </div>
                    <div className="site-card-wrapper side">
                        {
                            this.state.sides.map(item => {
                                return (
                                    <Card title={item.sname} key={item.gsid} className='sideItem' onClick={this.go(item)} bordered={false} loading={this.state.isLoading} style={{width: '20%'}}>
                                        <img src={item.simg} alt=""/>
                                    </Card>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        );
    }
    async componentDidMount() {
        let result = await getAllside()
        if(result.code === 200){
            this.setState({
                sides: result.data
            })
        }
        this.timer = setTimeout(() => {
            this.setState({
                isLoading: false
            })
        },1500)
    }
    componentWillUnmount() {
        clearTimeout(this.timer)
    }

    go = (item) => {
        return () => {
            let path = ''
            switch (item.gsid){
                case 1:
                    path = 'apple';
                    break;
                case 2:
                    path = 'huawei';
                    break;
                case 3:
                    path = 'mi';
                    break;
                case 4:
                    path = 'parts'
                    break;
                default:
                    path ='home'
                    break;
            }
            this.props.history.push(`/mall/${path}`)
        }

    }
}

export default withRouter(SideNav);